<template>
  <div class="container">
    <div class="topbar">
      <div class="title"><span><i class="el-icon-back" style="margin-right: 10px; cursor: pointer;" @click="$router.go(-1)"></i></span><span>设置</span></div>
    </div>
    <div class="limits">
      <el-form label-width="80px" v-for="user in petitionAuthorityList" :key="user.petitionAuthorityDatatype">
        <el-form-item :label="user.petitionAuthorityDatatype === '1' ? '管理员' : '处理人' ">
          <div class="select-btn" @click="selectDingUsers(user, 300)"><span><i class="el-icon-plus"></i></span>添加</div>
          <div v-for="(ids, index) in user.petitionAuthorityUsersIdsArr" :key="ids">
            <div class="select-btn" style="padding: 0 20px; width: auto; min-width: 80px;" @click="delMember(user, index)">{{user.petitionAuthorityUsersNamesArr[index]}}<div class="del">移除</div></div>
          </div>
        </el-form-item>
      </el-form>
      <el-form label-width="80px">
        <el-form-item :label="dictList[0].name" v-if="dictList.length > 0">
          <div class="select-btn" @click="showDictDialog(false)"><span><i class="el-icon-plus"></i></span>添加</div>
          <div v-for="child in dictList[0].child" :key="child.id">
            <div class="select-btn" style="padding: 0 20px; width: auto; min-width: 80px;" @click="showDictDialog(child.id)">{{child.name}}<div class="del">编辑</div></div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="信访标题">
          <el-input v-model="form.textName"></el-input>
        </el-form-item> -->
        <el-form-item label="信访告知">
          <el-input v-model="form.textContent" type="textarea" rows="10"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitText">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-drawer
      :visible.sync="showDict"
      :withHeader="false"
      :size="drawerSize">
      <div style="display: flex; flex-direction: column; height: 100vh; padding-bottom: 30px;">
        <el-form label-width="120px" label-position="top" style="flex: 1;">
          <div style="font-size: 16px; line-height: 50px; font-weight: bold; border-bottom: 1px solid #DCDFE6; padding: 0 20px;">{{!dictForm.id ? '新增' : '编辑'}}{{dictList.length > 0 ? dictList[0].name : ''}}</div>
          <div style="padding: 0 20px; margin-top: 20px; min-height: 400px; overflow-y: auto;">
            <el-form-item label="参数名称：">
              <span style="color: red; position:absolute; left: -10px; top: -46px">*</span>
              <el-input style="margin-right: 20px;" placeholder="请输入参数名称" v-model="dictForm.name"></el-input>
            </el-form-item>
            <el-form-item label="参数值：">
              <el-input style="margin-right: 20px;" placeholder="请输入参数值" v-model="dictForm.value"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input style="margin-right: 20px;" placeholder="请输入备注" type="textarea" v-model="dictForm.remark"></el-input>
            </el-form-item>
            <el-form-item label="排序号：">
              <el-input style="margin-right: 20px;" placeholder="请输入排序号" v-model="dictForm.sortNum"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div style="min-height: 40px; display: flex; padding: 0 20px;">
          <el-button type="primary" style="width: 50%" @click="submitDictForm">确定</el-button>
          <el-button style="width: 50%" @click="delDict" type="danger" v-if="dictForm.id">删除</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
export default {
  data () {
    return {
      petitionAuthorityList: [],
      form: {
        textName: '',
        textContent: '',
      },
      dictList: [],
      showDict: false,
      dictForm: {
        name: '',
        value: '',
        pid: '',
        remark: '',
        sortNum: '',
      },
      drawerSize: '500px',
    };
  },
  components: {},
  mounted () {
    this.drawerSize = !this.isPC() ? '80%' : '500px';
    this.getAuthorityList()
    this.getTextInfo()
    this.getDictList()
  },
  mixins: [dingMixin],
  methods: {
    async getAuthorityList() {
      let data = await this.$httpN.postB('petition/authority/list')
      data.forEach( user => {
        if(user.petitionAuthorityUsersId !== '') {
          user.petitionAuthorityUsersIdsArr = user.petitionAuthorityUsersId.split(',')
          user.petitionAuthorityUsersNamesArr = user.petitionAuthorityUsersName.split(',')
        }
      })
      this.petitionAuthorityList = data
    },
    selectDingUsers(authorityData, num){
      this.complexPicker(num, [], authorityData.petitionAuthorityUsersIdsArr).then((data)=>{
        authorityData.petitionAuthorityUsersIdsArr = data.map(item => item.emplId);
        authorityData.petitionAuthorityUsersNamesArr = data.map(item => item.name)
        authorityData.petitionAuthorityUsersId = authorityData.petitionAuthorityUsersIdsArr.join(',');
        authorityData.petitionAuthorityUsersName = authorityData.petitionAuthorityUsersNamesArr.join(',')
        this.submitAuthority(authorityData)
      })
    },
    delMember(authorityData, idx) {
      authorityData.petitionAuthorityUsersIdsArr.splice(idx,1); 
      authorityData.petitionAuthorityUsersNamesArr.splice(idx,1); 
      authorityData.petitionAuthorityUsersId = authorityData.petitionAuthorityUsersIdsArr.join(',');
      authorityData.petitionAuthorityUsersName = authorityData.petitionAuthorityUsersNamesArr.join(',');
      this.submitAuthority(authorityData)
    },
    async submitAuthority(authorityData) {
      if(!await this.$httpN.postB('petition/authority/update', authorityData)) return
      formUtil.submitSuccess("保存成功");
      this.getAuthorityList()
      window.NEEDREFRESH = true;
    },
    async getTextInfo() {
      let data = await this.$httpN.postB('petition/text/info');
      this.form = data[0];
    },
    async submitText() {
      if(!this.form.textName) return this.$message.error('请输入信访标题');
      if(!this.form.textContent) return this.$message.error('请输入信访正文');
      if(!await this.$httpN.postB('petition/text/update', this.form)) return
      formUtil.submitSuccess('保存成功');
    },
    async getDictList() {
      let {list} = await this.$httpN.postB('petition/dict/list', {limit: 999});
      this.dictList = list;
      this.dictList.forEach(item => {
        this.getSubDictList(item)
      })
    },
    async getSubDictList(item) {
      let {list} = await this.$httpN.postB('petition/dict/list', {limit: 999, pid: item.id});
      this.$set(item, 'child', list)
    },
    async showDictDialog(id) {
      this.showDict = true
      if(!id) {
        formUtil.resetData(this.dictForm);
      } else {
        this.dictForm = await this.$httpN.postB('petition/dict/info', { id: id })
      }
    },
    async submitDictForm() {
      if(!this.dictForm.name) return this.$message.error('请输入参数名称');
      this.dictForm.pid = this.dictList[0].id;

      if(!await this.$httpN.postB(!this.dictForm.id ? 'petition/dict/save' : 'petition/dict/update', this.dictForm)) return
      this.showDict = false;
      this.getDictList()
    },
    async delDict() {
      formUtil.submitConfirm('请问您是否确定删除该参数？', async ()=> {
        if(!await this.$httpN.postB('petition/dict/delete', {ids: this.dictForm.id })) return;
        formUtil.submitSuccess('删除成功');
        this.showDict = false;
        this.getDictList();
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100vh;
  .topbar{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #DCDFE6;
    .title {
      line-height: 50px;
      font-size: 18px;
    }
  }
  .limits {
    padding: 20px;
    .select-btn{
      float:left;
      font-weight: normal;
      margin-right: 5px;
      margin-bottom: 10px;
      width: 80px;
      height: 28px;
      border-radius: 30px;
      background: #FAFAFA;
      border: 1px solid #ECECEC;
      position: relative;
      padding-left: 21px;
      line-height: 28px;
      color: #7982A7;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      span{
        position: absolute;
        top: 1px;
        left: 1px;
        display:block;
        height: 24px;
        width: 24px;
        background: #CACACA;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      .del{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        color: white;
        text-align: center;
        background:rgba(130, 130, 130, 0.9);
        display: none;
      }
      &:hover{
        .del, .close{
          display: block;
        }
      }
    }
  }
}
</style>